<template>
  <div
    class="emoji-category-card animate__animated"
    :class="[animationType]"
    @click="handleClick"
  >
    <el-card
      shadow="hover"
      :body-style="{ padding: '0px', position: 'relative' }"
    >
      <!-- 封面图片容器 -->
      <div class="cover-container">
        <template v-if="coverEmoji?.url">
          <!-- 加载状态 -->
          <div v-if="isLoading" class="image-loading">
            <el-icon class="loading"><Loading /></el-icon>
          </div>
          
          <!-- 图片主体 -->
          <img
            :src="coverEmoji.url"
            class="category-cover"
            :style="{ display: isLoading || hasError ? 'none' : 'block' }"
            @load="handleImageLoad"
            @error="handleImageError"
          />
          
          <!-- 错误状态 -->
          <div v-if="hasError" class="fallback-box category-cover"></div>
        </template>
        
        <!-- 无封面图片状态 -->
        <div v-else class="fallback-box category-cover"></div>
      </div>

      <!-- 底部信息保持不变 -->
      <div class="category-info">
        <div class="info-text">
          <span class="category-name" style="font-weight: bold;">{{ category.name }}</span><br />
          <span class="count">{{ emojiCount }}个表情</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import { Loading } from "@element-plus/icons-vue";
import { useEmojiStore } from "@/store/emojiStore";

const emojiStore = useEmojiStore();
const props = defineProps({
  category: {
    type: Object,
    required: true,
    validator: (value) => ["name", "id", "emojiList"].every((key) => key in value),
  },
});

const emit = defineEmits(["click"]);

// 图片加载状态管理
const isLoading = ref(true);
const hasError = ref(false);

const handleImageLoad = () => {
  isLoading.value = false;
  hasError.value = false;
};

const handleImageError = () => {
  isLoading.value = false;
  hasError.value = true;
};

// 计算封面表情对象
const coverEmoji = computed(() => {
  const lastEmojiId = props.category.emojiList[props.category.emojiList.length - 1];
  return props.category.id !== -1 
    ? emojiStore.selectEmojiById(lastEmojiId)
    : lastEmojiId;
});

// 计算表情数量
const emojiCount = computed(() => props.category.emojiList.length);

// 点击动画处理
// 点击处理逻辑修改
const animationType = ref('');

const handleClick = () => {
  // 触发脉冲动画
  animationType.value = 'animate__pulse';
  
  // 动画结束后清除类名
  setTimeout(() => {
    animationType.value = '';
  }, 500); // 动画持续时间需要与css动画匹配

  emit("click", props.category);
};
</script>

<style lang="less" scoped>
/* 修改后的样式调整 */
.cover-container {
  position: relative;
  width: 100%;
  height: 85px;
  overflow: hidden;
  border-radius: 10px;

  .category-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #f0f0f0; /* 图片加载完成前的背景色 */
  }

  .image-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f5f7fa;

    .loading {
      font-size: 24px;
      color: #409eff;
      animation: rotating 2s linear infinite;
    }
  }

  .fallback-box {
    width: 100%;
    height: 100%;
    background: #f0f0f0;
  }
}

/* 保持原有动画 */
@keyframes rotating {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.emoji-category-card {
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
  
  /* 解决动画溢出问题 */
  overflow: hidden;
  transform: translateZ(0);
}
</style>